<!--图形验证码-->
<template>
  <div class="ImageCaptchaCode">
    <el-input ref="vercode" v-model="captchaCode" placeholder="请输入图形验证码" type="text" maxlength="4" />
    <div class="login-code"><img :src="captchaCodeImage" class="login-code-img" style="cursor: pointer" @click="getCaptchaCode"></div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入图形验证码'
    },
    init: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      captchaCode: '',
      captchaCodeImage: ''
    }
  },

  watch: {
    captchaCode: function(val) {
      this.$emit('input', val)
    },
    value: function(val) {
      this.captchaCode = val
    }
  },
  created() {
    this.getCaptchaCode()
  },
  methods: {
    getCaptchaCode() {
      this.$store.dispatch('getCaptchaCode', {}).then((res) => {
        this.captchaCodeImage = res
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ImageCaptchaCode{
    display: flex;

}
</style>
